<template>
	<view>
		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<me-tabs v-model="tabIndex" :tabs="tabs"></me-tabs>
		<Login>
			<swiper :style="{ height: height }" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab, i) in tabs" :key="i">
					<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height">
					</mescroll-item>
				</swiper-item>
			</swiper>
		</Login>

	</view>
</template>

<script>
	import MescrollItem from '@/components/course/CourseItem.vue';
	import MeTabs from '@/components/me-tabs/me-tabs.vue';
	import {
		getCodeList
	} from '@/utils/dict.js';
	export default {
		components: {
			MescrollItem,
			MeTabs
		},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin
			} 
		},
		data() {
			return {
				height: '', // 需要固定swiper的高度
				tabs: [],
				tabIndex: 0 // 当前tab的下标
			};
		},
		async onLoad() {
			// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px';
			const tabs = await getCodeList('STU_CATEGORY');
			this.tabs = [{
				name: '全部',
				value: ''
			}, ...tabs];
		},
		onShow() {
			this.navTo()
			// 返回刷新: https://www.mescroll.com/uni.html#note 第二点
			// if(this.canReset){
			// 	let curMescroll = this.getMescroll(this.tabIndex)
			// 	curMescroll && curMescroll.resetUpScroll()
			// }
			// this.canReset = true
		},
		methods: {
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current;
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.isLogin) {
					url = '/pages/login/index';
				}
				uni.navigateTo({
					url
				});
			},
			// 获取指定下标的mescroll对象
			// getMescroll(i){
			// 	let mescrollItems = this.$refs.mescrollItem;
			// 	if(mescrollItems){
			// 		let item = mescrollItems[i]
			// 		if(item) return item.mescroll
			// 	}
			// 	return null
			// }
		}
	};
</script>

<style></style>
